<template>
  <div>
    <vue-cropper
      ref="cropper"
      :guides="false"
      :src="imageSrc"
      :width="cropWidth"
      :height="cropHeight"
      @cropend="handleCrop"
    />
    <button @click="cropImage">裁剪图片</button>
  </div>
</template>
 
<script>
import VueCropper from 'vue-cropper'
 
export default {
  components: {
    VueCropper
  },
  data() {
    return {
      imageSrc: '../assets/11111.jpg', // 图片路径
      cropWidth: 200, // 设定裁剪宽度
      cropHeight: 200, // 设定裁剪高度
      croppedBlob: null // 裁剪后的图片Blob数据
    }
  },
  methods: {
    cropImage() {
      this.$refs.cropper.crop() // 触发裁剪
    },
    handleCrop(blob) {
      this.croppedBlob = blob // 获取裁剪后的图片Blob数据
      // 处理裁剪后的图片，例如上传或显示
    }
  }
}
</script>